import React from "react"
import { Editor } from "@tinymce/tinymce-react"
import { Button } from "antd"
import { UploadOutlined } from "@ant-design/icons"
import useFormModal from "@/hooks/useFormModal"
// import UniversalUpload from "@/components/upload/UniversalUpload"

import UploadFile from "./components/UploadFile"
import { debounce } from "lodash"
function Tinymce({ handleEditorChange }) {
  const tinymceId = "react-tinymce-1683538922212567"

  const imageSuccessCBK = (arr) => {
    viewFormModal.setVisible(false)
    arr.forEach((v) => {
      window.tinymce.get(tinymceId)?.insertContent(`<img style="max-width: 100%" src="${v.url}" >`)
    })
  }
  const viewFormModal = useFormModal({
    modal: {
      title: "上传文件"
    },
    imageSuccessCBK
  })

  return (
    <>
      <div className="relative">
        <Editor
          id={tinymceId}
          tinymceScriptSrc={`${import.meta.env.BASE_URL}tinymce/tinymce.min.js`}
          initialValue="<p></p>"
          init={{
            selector: "#" + tinymceId, //富文本编辑器的id,
            language_url: import.meta.env.BASE_URL + "tinymce/langs/zh-Hans.js",
            language: "zh_CN",
            skin_url: import.meta.env.BASE_URL + "tinymce/skins/ui/oxide",
            height: 500,
            branding: false, //是否禁用“Powered by TinyMCE”
            image_dimensions: false, //去除宽高属性
            promotion: false, //去除更新标识
            menubar: true,
            plugins: ["lists", "table"],
            toolbar:
              "undo redo | formatselect | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat"
          }}
          onEditorChange={debounce((r) => {
            handleEditorChange(r)
          }, 1000)}
        />
        <div className="absolute top-10px right-10px z-999">
          <Button
            size="small"
            type="primary"
            icon={<UploadOutlined />}
            onClick={() => {
              viewFormModal.setVisible(true)
            }}
          >
            点击上传
          </Button>
        </div>
      </div>
      {viewFormModal.modalProps.open && <UploadFile {...viewFormModal} />}
    </>
  )
}

export default Tinymce
